<template>
  <div>
    <div class="mb-3" v-if="option">
      <el-echarts
        theme="macarons"
        :height="400"
        :width="width"
        @onInit="c => onInit(c, index)"
        v-show="!imgType"
        :option="option"
      ></el-echarts>
      <img height="400" class="w-100" v-show="imgType" :src="imgData" alt="" />
    </div>

    <table class="table table-bordered table-border-black text-center">
      <tbody>
        <tr>
          <td>年月</td>
          <td>电费</td>
          <td>同比增长</td>
          <td>电量</td>
          <td>同比增长</td>
        </tr>
        <tr v-for="(fee, j) in eleFee" :key="`fee-${j}`">
          <td>{{ fee.ele_date }}</td>
          <td>{{ fee.ele_fee }}</td>
          <td>{{ fee.fee_compare }}</td>
          <td>{{ fee.ele_amount }}</td>
          <td>{{ fee.ele_amount_compare }}</td>
        </tr>
        <tr v-if="!eleFee.length">
          <td colspan="5" class="p-3 text-muted">暂无用电数据</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import { echartsXFormatter } from '@vimi/utils-tool'

export default {
  components: {},
  props: {
    eleTableId: String,
    imgType: Boolean,
    width: {
      type: [Number, String],
      default: '100%',
    },
  },
  data() {
    return {
      chart: null,
      option: null,
      imgData: '',
      eleFee: [],
    }
  },
  computed: {},
  watch: {
    eleTableId() {
      this.getData()
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    onInit(chart) {
      this.chart = chart
    },
    async getData() {
      if (!this.eleTableId) {
        return
      }

      this.$api
        .getData(
          'credit',
          'datum_customer_ele_fee',
          {
            'credit_ele_table_id.eq': this.eleTableId,
          },
          { ele_date: 'desc' }
        )
        .then(res => {
          this.eleFee = (res && res.data) || []
          const xData = []
          const aData = []
          const bData = []
          const ascData = [...this.eleFee]
          ascData.sort((a, b) => (a.ele_date > b.ele_date ? 1 : -1))
          for (let t of ascData) {
            xData.push(t.ele_date)
            const fee = Number.parseFloat(t.ele_fee)
            const nowFee = isNaN(fee) ? 0 : fee
            aData.push(nowFee)
            const compare = Number.parseFloat(t.fee_compare.replace(/(.*)%$/, '$1'))
            // const lastFee = isNaN(compare) ? '-' : Math.round(nowFee * (1 + compare / 100) * 100) / 100
            const lastFee = isNaN(compare)
              ? '-'
              : (Math.round(nowFee / (1 + compare / 100)) * 100) / 100
            bData.push(lastFee)
          }

          this.option = {
            backgroundColor: '#eff8fe',
            title: {
              text: '电费明细',
              subtext: '',
              left: 'center',
            },
            tooltip: {
              trigger: 'axis',
            },
            legend: {
              top: 32,
              data: ['今年', '上年同期'],
            },
            xAxis: [
              {
                type: 'category',
                data: xData,
                axisLabel: {
                  formatter: v => echartsXFormatter(v, 5),
                },
              },
            ],
            yAxis: [
              {
                type: 'value',
                name: '电费使用',
              },
            ],
            series: [
              {
                name: '今年',
                type: 'line',
                data: aData,
              },
              {
                name: '上年同期',
                type: 'line',
                data: bData,
              },
            ],
          }

          if (this.customerRelatedId && this.chart && this.chart.getDataURL) {
            this.chart.on('finished', () => {
              this.imgData = this.chart.getDataURL()
            })
          }
        })
    },
  },
}
</script>
<style scoped lang="scss">
.table-border-black {
  tr {
    th,
    td {
      border-color: #333 !important;
      font-size: 1rem;
    }
  }
}
</style>
